<template>
  <el-tabs :tab-position="tabPosition" style="height: 100%">
    <el-tab class="rito">
      <div>
        <el-button>刷新</el-button>
        <el-button type="primary">新增</el-button>
      </div>
      <p>字典列表</p>
      <div>
        <el-input
          v-model="input"
          placeholder="请输入内容"
          style="width: 200px"
        ></el-input>
        <el-button type="primary">搜索</el-button>
      </div>
    </el-tab>

    <el-tab-pane label="品牌 - brand">
      <el-table :data="tableData" border style="width: 100%" >
        <el-table-column fixed prop="date" label="更新日期" width="150">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="120">
        </el-table-column>
        <el-table-column prop="province" label="排序" width="120">
        </el-table-column>
        <el-table-column prop="city" label="备注" width="120">
        </el-table-column>
        <el-table-column prop="address" label="创建时间" width="300">
        </el-table-column>
        <el-table-column prop="address" label="更新时间" width="300">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >新增</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>

    <el-tab-pane label="类型 - type">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="date" label="更新日期" width="150">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="120">
        </el-table-column>
        <el-table-column prop="province" label="排序" width="120">
        </el-table-column>
        <el-table-column prop="city" label="备注" width="120">
        </el-table-column>
        <el-table-column prop="address" label="创建时间" width="300">
        </el-table-column>
        <el-table-column prop="address" label="更新时间" width="300">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >新增</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      type: "12",
      tabPosition: "left",
      tableData: [
        {
          date: "2016-05-02",
          name: "COOL",
          province: "1",
          city: "",
          address: "2016-05-04",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "闪酷",
          province: "2",
          city: "",
          address: "2016-05-04",
          zip: 200333,
        },
      ],
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
  },
};
</script>

<style lang="scss">
.el-main {
  position: relative;
  background-color: #fff;
  margin: 20px;
  margin-top: 0;
}
.el-tabs__header {
  width: 300px;
  height: 600px;
}
.el-tabs__item {
  background-color: #f9f9f9;
  margin: 30px 20px 0px 0;
  text-align: left;
}
#tab-0,
#tab-1 {
  text-align: left;
}
.rito {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 20px 0;
}
#leto {
    position: absolute;
    z-index: 999999;
    left: 10px;
}
</style>
